<template>
  <el-dialog title="修改密码" :visible.sync="visible" width="600px" @close="close">
      <el-form :model="form" :rules="rules" ref="form">
      <el-row>
        <el-col :span="22">
          <el-form-item label="原密码" :label-width="formLabelWidth" prop="oldPassword" style="width: 450px">
            <el-input :type="pwdInputs[0].type" v-model="form.oldPassword" placeholder="请输入">
              <div slot="suffix" class="el-input__icon">
                <el-button size="mini" type="text" @click="onToggle(pwdInputs[0])">
                  <i :class="pwdInputs[0].icon" ></i>
                </el-button>
              </div>
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="22">
          <el-form-item label="新密码" :label-width="formLabelWidth" prop="newPassword" style="width: 450px">
            <el-input :type="pwdInputs[1].type" v-model="form.newPassword" placeholder="请输入">
              <div slot="suffix" class="el-input__icon">
                <el-button size="mini" type="text" @click="onToggle(pwdInputs[1])">
                  <i :class="pwdInputs[1].icon" ></i>
                </el-button>
              </div>
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="22">
          <el-form-item label="确认密码" :label-width="formLabelWidth" prop="rePassword" style="width: 450px">
            <el-input :type="pwdInputs[2].type" v-model="form.rePassword" placeholder="请再次输入新密码">
              <div slot="suffix" class="el-input__icon">
                <el-button size="mini" type="text" @click="onToggle(pwdInputs[2])">
                  <i :class="pwdInputs[2].icon" ></i>
                </el-button>
              </div>
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item :label-width="formLabelWidth">
        <template>
          <c-button type="primary" @click="btnOk">保存</c-button>
          <el-button @click="handleCancel">取消</el-button>
        </template>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>
<script>

export default {
  name: 'UpdatePassword',
  data () {
    const newPwd = (rule, value, callback) => {
      if (value.length < 6) {
        callback(new Error('密码不能小于6位!'))
      } else {
        callback()
      }
    }
    const conPwd = (rule, value, callback) => {
      if (value !== this.form.newPassword) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    return {
      visible: true,
      formLabelWidth: '120px',
      pwdInputs: [{
        type: 'password',
        icon: 'fa fa-eye'
      }, {
        type: 'password',
        icon: 'fa fa-eye'
      }, {
        type: 'password',
        icon: 'fa fa-eye'
      }],
      form: {
        oldPassword: '',
        newPassword: '',
        rePassword: ''
      },
      rules: {
        oldPassword: this.$checkRules.password,
        newPassword: [
          ...this.$checkRules.newPassword,
          {validator: newPwd, trigger: 'change'}
        ],
        rePassword: [
          ...this.$checkRules.conPassword,
          {validator: conPwd, trigger: 'change'}
        ]
      }
    }
  },
  methods: {
    btnOk (btn) {
      this.$refs['form'].validate((valid) => {
        // 校验通过
        if (valid) {
          this.$service.system.updatePassword(this.form).then(() => {
            this.visible = false
            this.$emit('ok')
          }).finally(() => {
            btn.isLoading(false)
          })
        } else {
          btn.isLoading(false)
        }
      })
    },
    handleCancel () {
      this.close()
    },
    onToggle (item) {
      if (item.type === 'password') {
        item.icon = 'fa fa-eye-slash'
        item.type = 'text'
      } else {
        item.icon = 'fa fa-eye'
        item.type = 'password'
      }
    },
    close () {
      this.$refs['form'].resetFields()
      this.$emit('close')
    }
  }
}
</script>

<style>

</style>
